<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="dialog-my"
  >
    <el-form
      :model="form"
      :rules="rules"
      :label-position="'right'"
      label-width="80px"
      ref="myform"
    >
      <el-form-item label="场区名称" prop="regionName">
        <el-input
          v-model="form.regionName"
          autocomplete="off"
          style="width: 224px"
        ></el-input>
      </el-form-item>
      <el-form-item label="场区状态" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          style="width: 224px"
        >
          <el-option label="可预订" value="1"> </el-option>
          <el-option label="不可预订" value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="营业时间" prop="businessStartTime">
        <el-time-select
          placeholder="起始时间"
          v-model="form.businessStartTime"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
          }"
        >
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="form.businessEndTime"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
            minTime: form.businessStartTime,
          }"
        >
        </el-time-select>
      </el-form-item>
      <el-form-item label="场次时常" prop="interval" v-if="!form.id">
        <el-select v-model="form.interval" placeholder="请选择">
          <el-option label="30分钟" value="0"> </el-option>
          <el-option label="60分钟" value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sortBy">
        <el-input
          v-model="form.sortBy"
          autocomplete="off"
          style="width: 224px"
        ></el-input>
      </el-form-item>
      <el-form-item label="相关项目" prop="gymProductId">
        <el-select v-model="form.gymProductId" placeholder="请选择">
          <el-option label="羽毛球" value="1"> </el-option>
          <el-option label="篮球" value="2"> </el-option>
          <el-option label="乒乓球" value="3"> </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { regionAdd } from '@/config/api'

export default {
  data () {
    const timeValidator = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择时间"))
      } else if (!this.form.businessStartTime) {
        callback(new Error("请选择开始时间"))
      } else if (!this.form.businessEndTime) {
        callback(new Error("请选择结束时间"))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      title: '',
      form: {
        "regionName": undefined, //场区名称
        "status": undefined, //状态
        "businessStartTime": undefined, //营业开始时间
        "businessEndTime": undefined, //营业结束时间
        "interval": undefined, //场次时长
        "sortBy": undefined, //排序
        "gymProductId": undefined //项目ID
      },
      rules: {
        regionName: [
          { required: true, message: '请输入场区名称', trigger: 'blur' }],
        status: [
          { required: true, message: '请选择场区状态', trigger: 'change' }
        ],
        businessStartTime: [
          { validator: timeValidator, required: true, trigger: 'change' }
        ],
        interval: [
          { required: true, message: '请选择场次时长', trigger: 'change' }
        ],
        sortBy: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        gymProductId: [
          { required: true, message: '请选择相关项目', trigger: 'change' }
        ],

      }
    }
  },
  methods: {
    addShow () {
      this.title = '新增场区'
      this.resetFields()

      this.dialogFormVisible = true
    },
    editShow (item) {
      this.resetFields()
      this.title = '编辑场区'
      this.form = {
        "regionName": item.regionName, //场区名称
        "status": item.status, //状态
        "businessStartTime": item.businessStartTime, //营业开始时间
        "businessEndTime": item.businessEndTime, //营业结束时间
        "interval": item.interval, //场次时长
        "sortBy": item.sortBy, //排序
        "gymProductId": item.gymProductId, //项目ID
        "id": item.id
      }
      this.dialogFormVisible = true
    },
    submit () {
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          regionAdd(this.form).then(res => {
            this.$parent.getData()
            this.dialogFormVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    resetFields () {
      this.form = {
        "regionName": undefined, //场区名称
        "status": undefined, //状态
        "businessStartTime": undefined, //营业开始时间
        "businessEndTime": undefined, //营业结束时间
        "interval": undefined, //场次时长
        "sortBy": undefined, //排序
        "gymProductId": undefined //项目ID
      }
    }
  }
}
</script>
<style>
</style>